<template>
  <el-dialog :visible.sync="dialogVisible" title="简单操作编辑" :close-on-click-modal="false" @close="dialogVisible=false" append-to-body>
    <el-form ref="forbidForm" :rules="rules" :model="formData" label-width="120px">
      <el-form-item label="操作类型" prop="operationType">
        <el-select
          v-model="formData.operationType"
          @change="handleOperationTypeChanged"
          placeholder="选择操作类型">
          <el-option label="简单操作(无需额外填写内容)" :value="0"></el-option>
          <el-option label="前端内置弹框" :value="1"></el-option>
          <el-option v-if="!isBulk" label="简单表单操作(新增/修改)" :value="2"></el-option>
          <el-option label="跳转" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="操作按钮文案"
        ></el-input>
      </el-form-item>
      <el-form-item label="跳转地址" v-if="formData.operationType === 3">
        <el-input v-model="formData.redirect" placeholder="输入跳转地址(${row}是对应的行, ${row.id}是对应行的id..,etc)"></el-input>
      </el-form-item>
      <el-form-item v-if="formData.operationType === 0" label="操作提示" prop="desc">
          <el-input
          v-model="formData.desc"
          placeholder="操作提示文案" ></el-input>
      </el-form-item>
      <el-form-item label="展示样式" prop="displayType">
          <el-select v-model="formData.displayType">
              <el-option label="蓝色" value="primary" />
              <el-option label="黄色" value="warning" />
              <el-option label="红色" value="danger" />
          </el-select>
      </el-form-item>
      <el-form-item label="出现条件" prop="visible" v-if="formData.operationType === 0 || formData.operationType === 1">
        <el-input
          v-model="formData.visible"
          placeholder="输入button出现条件(一直显示则不填)"></el-input>
      </el-form-item>
      <el-form-item v-if="formData.operationType === 0||formData.operationType === 2" label="api" prop="api">
          <el-input
          v-model="formData.api"
          placeholder="操作对应api" ></el-input>
      </el-form-item>
      <el-form-item v-if="formData.operationType === 0||formData.operationType === 2" label="请求类型" prop="requestType">
          <el-select
            v-model="formData.requestType"
            placeholder="选择请求类型"
            >
            <el-option v-if="formData.operationType === 0" label="get" value="get"></el-option>
            <el-option label="post" value="post"></el-option>
            <el-option label="put" value="put"></el-option>
            <el-option label="delete" value="delete"></el-option>
            </el-select>
      </el-form-item>
       <el-form-item v-if="isBulk" label="参数筛选" prop="rowFilter">
          <question content="所有选中的行通过这个‘参数筛选’的代码获取所需要的字段，然后添加到一个list中，在body中可以使用${rows}来拿到这些字段的集合."></question>
          <el-input
            v-model="formData.rowFilter"
            placeholder="输入参数筛选代码"
            ></el-input>
      </el-form-item>
      <el-form-item v-if="(formData.operationType === 0||formData.operationType === 2) && (formData.requestType === 'put' || formData.requestType === 'post')" label="body参数(json)" prop="bodyParams">
          <el-input
          v-model="formData.bodyParams"
          placeholder="操作对应的body参数" ></el-input>
      </el-form-item>
      <el-form-item v-if="formData.operationType === 0" label="是否需要确认" prop="bodyParams">
          <el-checkbox
          v-model="formData.needConfirm"
           ></el-checkbox>
      </el-form-item>
      <el-form-item v-if="formData.operationType === 1" label="前端内置弹窗" prop="dialogName">
          <el-select
            v-model="formData.dialogName"
            placeholder="输入内置弹窗的component name之类可以甄别出不同弹窗的东东.."
           >
           <el-option v-for="(dName, i) in componentNames" :key="i" :label="dName" :value="dName"></el-option>
           </el-select>
      </el-form-item>
      <el-form-item v-if="formData.operationType === 1 ||formData.operationType === 2" label="弹窗参数" prop="dialogParams">
        <el-input
          v-model="formData.dialogParams"
          placeholder="弹窗参数如果是一个object, 需要用${JSON.stringify(object)}..因为eval的时候直接放object进去会变成'[object]'这样的字符串."></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="onOK">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>

import {ComponentNames} from '../../../build-ins'

export default {
  name: 'OperationEditDialog',
  filters: {
    atomFieldDisplay(item) {
      return item.desc || item.fieldName
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: null
    },
    isBulk: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: this.value,
      componentNames: ComponentNames,
      rules: {
        name: [{ required: true, message: '不能为空' }],
        desc: [{ required: true, message: '不能为空' }],
        api: [{ required: true, message: '不能为空' }],
        requestType: [{ required: true, message: '不能为空' }],
        needConfirm: [{ required: true, message: '不能为空' }],
        dialogName: [{ required: true, message: '不能为空' }]
      },
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
          console.log('fucker?', this.value)
        this.formData = this.value
      }
    }
  },
  created() {
  },
  methods: {
    handleOperationTypeChanged(val) {
      if (val === 2) {
        // form弹窗，直接设置dialogName
        this.formData.dialogName = 'commonFormDialog'
      } else {
        this.formData.dialogName = ''
      }
    },
    onOK() {
      this.$refs.forbidForm.validate(valid => {
        if (valid) {
          console.log(this.formData)
          this.$emit('success', this.formData)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
